<template>
    <view class="px-4 pt-4 pb-2 text-sm">请选择优惠券名称</view>
    <view class="px-4 bg-white">

      <view class="h-14 flex justify-between items-center border-bottom" @click="selectCoupon(1)">
        <view>充值加成券</view>
        <image class="w-5 h-5" src="@/static/image/selected.png" v-if="selectId == 1"></image>
      </view>

      <view class="h-14 flex justify-between items-center border-bottom" @click="selectCoupon(2)">
        <view>新人专享优惠券</view>
        <image class="w-5 h-5" src="@/static/image/selected.png" v-if="selectId == 2"></image>
      </view>

      <view class="h-14 flex justify-between items-center" @click="selectCoupon(3)">
        <view>活动优惠券</view>
        <image class="w-5 h-5" src="@/static/image/selected.png" v-if="selectId == 3"></image>
      </view>

    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const selectId = ref(1)

const selectCoupon = (val) => {
  selectId.value = val
}

</script>

<style scoped lang="scss">
page {
  min-height: 100vh;
  background: #f5f5f5;
}
</style>
